<!-- 首页 -->
<template>
  <div class="box">
    <div class="title"></div>
    <div class="main">
      <div class="left">
        <div>
          <div class="lefttitle">区域客户数TOP20</div>
          <el-table :data="tableData1" class="tableBoxChild">
            <el-table-column label="序号" align="center" type="index">
            </el-table-column>
            <el-table-column prop="city" label="省/市" align="center">
            </el-table-column>
            <el-table-column prop="samenum" label="同业客户数量" align="center">
            </el-table-column>
          </el-table>
        </div>
        <div>
          <div class="lefttitle">客户授信TOP20</div>
          <el-table :data="tableData2" class="tableBoxChild">
            <el-table-column label="序号" align="center" type="index">
            </el-table-column>
            <el-table-column prop="city" label="表格标题1" align="center">
            </el-table-column>
            <el-table-column prop="samenum" label="表格标题2" align="center">
            </el-table-column>
          </el-table>
        </div>
        <div>
          <div class="lefttitle">客户类型分布</div>
          <div id="customType"></div>
        </div>
      </div>
      <div class="content">
        <div class="map">
          <div class="city" id="city"></div>
        </div>
        <div class="line_chart"></div>
      </div>
      <div class="right">
        <chartRight />
      </div>
    </div>
  </div>
</template>
<script>
import {
  keyEvent,
  queryBondNum,
  titleIndicators,
  queryTradeAmount,
  targetValue,
  riskDistribution,
} from '@/api/homePage/index.js';
import chartRight from './component/chartRight.vue';
import * as echarts from 'echarts';
export default {
  components: {
    chartRight,
  },
  data() {
    return {
      tableData1: [
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
      ],
      tableData2: [
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
        {
          city: '20附息国债13',
          samenum: '1,617,390.76',
        },
      ],
    };
  },
  async mounted() {
    this.drawcustomType();
    await this.cityFn();
  },
  methods: {
    drawcustomType() {
      const datas = [
        {
          name: '其他客户1',
          value: 1,
        },
        {
          name: '其他客户2',
          value: 2,
        },
        {
          name: '其他客户3',
          value: 3,
        },
        {
          name: '其他客户4',
          value: 4,
        },
        {
          name: '其他客户5',
          value: 5,
        },
      ];
      let myChart = this.$echarts.init(document.getElementById('customType'));
      let option;
      option = {
        color: ['#FFCD41', '#47EAFD', '#2FA3FF', '#EAEDFE', '#44FF98'],
        legend: {
          itemHeight: 9,
          itemWidth: 9,
          icon: 'circle',
          orient: 'vertical',
          top: 'center',
          right: '5%',
          textStyle: {
            align: 'left',
            color: '#',
            verticalAlign: 'middle',
            rich: {
              name: {
                width: 80,
                fontSize: 12,
              },
              value: {
                width: 20,
                align: 'right',
                fontFamily: 'Medium',
                fontSize: 16,
              },
              rate: {
                width: 10,
                align: 'right',
                fontSize: 16,
              },
            },
          },
          data: datas,
          formatter: (name) => {
            if (datas.length) {
              const item = datas.filter((item) => item.name === name)[0];
              return `{name|${name}}`;
            }
          },
        },
        tooltip: {
          trigger: 'item',
          formatter: '{d}%',
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['30%', '80%'],
            center: ['35%', '50%'],
            roseType: 'radius',
            label: {
              show: false,
              formatter: '{d}%',
            },
            labelLine: {
              show: false,
              length: 1,
              length2: 20,
            },
            data: datas,
          },
        ],
      };
      myChart.setOption(option);
    },
    async cityFn() {
      let myChart2 = echarts.init(document.getElementById('city'));
      echarts.registerMap('china', res);
      let data = [
        ['116.405285', '39.904989', 800],
        ['117.190182', '39.125596', 600],
      ];

      let mapMax = Math.max(...data.map((item) => item[2]));
      let mapMin = Math.min(...data.map((item) => item[2]));

      myChart2.setOption({
        geo: {
          map: 'china',
          label: {
            show: true,
          },
          itemStyle: {
            areaColor: '#76b1ff',
            borderColor: '#eee',
            shadowColor: '#76b1ff',
            shadowBlur: 10,
            borderWidth: 1,
          },
          emphasis: {
            itemStyle: {
              areaColor: '#409EFF',
              borderWidth: 0,
            },
          },
        },
        visualMap: {
          show: true,
          color: ['#ff4601', '#fffc00', '#87cffa'],
          min: mapMin,
          max: mapMax,
        },
        series: [
          {
            name: 'AQI',
            type: 'heatmap',
            coordinateSystem: 'geo',
            data: data,
          },
        ],
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  height: 100%;
  width: 100%;
  background-image: url('~@/assets/bj.png');
  background-repeat: no-repeat;
  background-size: 100%;
}
.title {
  height: 70px;
  // background-color: skyblue;
}
.main {
  display: flex;
  height: 100%;
  width: 100%;
  .left {
    width: 400px;
    height: 100%;
  }
  .content {
    flex: 1;
    height: 100%;
    // background-color: gray;
  }
  .right {
    width: 400px;
    height: 100%;
    // background-color: aquamarine;
  }
  .tableBoxChild {
    height: calc((100vh - 220px) / 3 - 40px);
    overflow: auto;
  }
  #customType {
    width: 100%;
    height: calc((100vh - 220px) / 3 - 40px);
  }
  .lefttitle {
    background-image: url('~@/assets/titlebg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    color: #fff;
    font-size: 16px;
    width: 100%;
    height: 33px;
    line-height: 33px;
    padding-left: 19px;
    margin: 20px 0;
  }
}
// .city {
//   width: 500px;
//   height: 500px;
// }
</style>
